<template>
  <div class="orderListRuleForm">
    <panle title='客户列表' content="客户列表"></panle>

    <el-form :inline="true" ref="form" :model="form" label-width="80px" class="demo-form-inline">
      <el-tabs v-model="form.activeName" @tab-click="handleClick">
        <el-tab-pane label="全部客户" name="third"></el-tab-pane>
        <el-tab-pane label="发展客户" name="first"></el-tab-pane>
        <el-tab-pane label="继承客户" name="second"></el-tab-pane>
      </el-tabs>

      <el-form-item label="创建时间" prop="add_time">
        <el-date-picker
            v-model="form.add_time"
            type="daterange"
            align="right"
            size="mini"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']"
            :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="级别" prop="popu_level">
        <el-select size="mini" v-model="form.popu_level" placeholder="请选择">
          <el-option v-for="item in populevel" :key="item.value" :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="客户名称">
        <el-input size="mini" placeholder="请输入客户名称" v-model="form.nickname"></el-input>
      </el-form-item>

      <el-form-item label="手机号">
        <el-input size="mini" placeholder="请输入手机号" v-model="form.phone"></el-input>
      </el-form-item>

      <el-form-item label="推广员">
        <el-input size="mini" placeholder="请输入推广员名称" v-model="form.popu_name"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="search" size="mini">搜索</el-button>
        <el-button @click="resetForm('form')" size="mini">重置</el-button>
        <el-button size="mini" @click="init()">刷新</el-button>
        <!--                <vue-json-excel-->
        <!--                    style="display: inline;margin-left: 10px;"-->
        <!--                    :data="tableData"-->
        <!--                    :fields="excelFields"-->
        <!--                    name="导出流失提醒.xlsx"-->
        <!--                    type="xlsx">-->
        <!--                    <el-button size="mini">导出</el-button>-->
        <!--                </vue-json-excel>-->

      </el-form-item>
    </el-form>
    <div class="table-wrap">
      <el-table :data="tableData" v-loading="loading" style="width: 100%;margin-bottom: 20px;" row-key="id" border
                stripe default-expand-all>
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="nickname" label="客户昵称"></el-table-column>
        <el-table-column prop="phone" label="手机号"></el-table-column>
        <el-table-column prop="popu_name" label="上级推广员"></el-table-column>
        <el-table-column prop="popu_level" label="级别"></el-table-column>
        <el-table-column prop="add_time" label="创建时间"></el-table-column>
        <el-table-column prop="orderno" label="成交单数"></el-table-column>
        <el-table-column prop="paytime" label="最近成交时间"></el-table-column>
        <el-table-column prop="id" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="mini" icon="fa  fa-pencil" @click="clickEditPhone(scope.row)">修改手机号</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page="form.pageNumber" :page-sizes="[10, 50, 100, 200]"
                       :page-size="form.pageSize"
                       background layout="total, sizes, prev, pager, next, jumper"
                       :total="form.total"></el-pagination>
      </div>
    </div>
    <el-dialog :visible.sync="editPhoneOpen" width="80%" :before-close="handleClose" append-to-body title="修改手机号">
      <el-form ref="editPhoneForm" :model="editPhoneForm" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="旧手机号" prop="old_phone">
              <el-input style="width:50%" v-model="editPhoneForm.old_phone" :disabled="true" size="small" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="新手机号" prop="phone">
              <el-input style="width:50%" v-model="editPhoneForm.phone" size="small" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose" size="small">取 消</el-button>
        <el-button type="primary" @click="subEditPhoneForm('editPhoneForm')"
                   size="small">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  editPhone,
  getUserList
} from "@/api/sell/user/user";

import Panle from '@/components/Panle';
import PersButton from '@/components/PersButton';
import {hasPermission, isShow} from '@/common/permission';
import VueJsonExcel from 'vue-json-excel';
import {dateFormat} from "@/utils";
import {getPosterInfo} from "@/api/sell/posters/posters";
import {checkGroupLink} from "@/api/sell/grouplink/grouplink";

export default {
  components: {
    Panle,
    PersButton,
    VueJsonExcel
  },
  data() {
    return {
      loading: false,
      editPhoneOpen:false,
      options: [],
      value: '',
      open: false,
      tableData: [],
      number: 0,
      status: 0,
      form: {
        activeName: 'third',
        add_time: [dateFormat(new Date(), 'yyyy-MM-dd') + ' 00:00:00', dateFormat(new Date(), 'yyyy-MM-dd') + ' 23:59:59'],
        popu_level: '',
        nickname: '',
        phone: '',
        popu_name: '',
        pageSize: 10,
        pageNumber: 1,
        total: 0,
      },
      editPhoneForm:{
        phone: '',
        old_phone:'',
        id:''
      },
      populevel: [{
        value: 1,
        label: '一级'
      }, {
        value: 2,
        label: '二级'
      }],
      optionsVa: [],
      pickerOptions: {
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              const current = new Date();
              const month = current.getFullYear() + '-' + (current.getMonth() + 1) + '-' + current.getDate(); //年月日
              const start = new Date();
              const end = new Date();
              start.setTime(new Date(month).getTime());
              end.setTime(new Date(month + ' 23:59:59').getTime());
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '昨天',
            onClick(picker) {
              const current = new Date();
              const month = current.getFullYear() + '-' + (current.getMonth() + 1) + '-' + (current.getDate() - 1); //年月日
              const start = new Date();
              const end = new Date();
              start.setTime(new Date(month).getTime());
              end.setTime(new Date(month + ' 23:59:59').getTime());
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '上一周',
            onClick(picker) {
              const current = new Date();
              const start_day = current.getDate() - current.getDay() - 6;
              const end_day = current.getDate() - current.getDay();
              const month = current.getFullYear() + '-' + (current.getMonth() + 1) + '-'; //年月
              const start = new Date();
              const end = new Date();
              start.setTime(new Date(month + start_day).getTime());
              end.setTime(new Date(month + end_day + ' 23:59:59').getTime());
              picker.$emit('pick', [start, end]);
            }
          }
        ]
      },
      excelFields: {
        "客户 ": "client_name",
        "添加员工": "staff_name",
        "企业标签": "tag_name",
        "流失时间": "lapsed_time",
        "添加时间": "add_time",
        "添加员工时长（天）": "day_time",

      }
    }
  },
  created() {
    sessionStorage.removeItem('live-stat')

    this.init(true);
  },
  methods: {
    editPhone,
    hasPermission,
    isShow,
    init() {
      this.loading = true;
      getUserList(this.form).then((res) => {
        this.tableData = res.data.list;
        this.form.total = res.data.total;
        this.loading = false;
      })
    },

    search: function () {
      // this.loading = true;
      this.form.pageSize = 10;
      this.form.pageNumber = 1;
      this.init();
    },
    //关闭弹框回调
    handleClose(){
      this.editPhoneOpen = false;
    },
    handleSizeChange: function (e) {
      this.form.pageSize = e;
      this.init();
    },
    handleCurrentChange: function (e) {
      this.form.pageNumber = e;
      this.init();
    },
    resetForm(formName) {
      this.form.popu_level = ''
      this.form.add_time = ''
      this.form.nickname = ''
      this.form.phone = ''
      this.form.popu_name = ''
      this.init();
    },
    handleClick(tab, event) {
      this.form.activeName = tab.name;
      this.init();
    },
    clickEditPhone:function (e){
      this.editPhoneOpen = true;
      this.editPhoneForm.id = e.id;
      this.editPhoneForm.old_phone = e.phone;
    },
    subEditPhoneForm:function(data){
      this.$refs[data].validate((valid) => {
        if (valid) {
          const param = {
            'id':this.editPhoneForm.id,
            'phone':this.editPhoneForm.phone
          }
          editPhone(param).then((res)=>{
            if(res.code==200){
              this.msgSuccess(res.msg);
              this.editPhoneOpen=false;
              this.editPhoneForm.id = '';
              this.editPhoneForm.old_phone = '';
              this.editPhoneForm.phone = '';
              this.init();
            }else{
              this.msgError(res.msg);
            }
          })
        }else{
          return false;
        }
      })
    },

  }
}

</script>

<style lang="scss" scoped>
.demo-form-inline {
  margin: 20px;

  .el-form-item {
    margin-bottom: 0;
  }
}

.el-form--inline .el-form-item {
  display: inline-block;
  vertical-align: top;
}

.orderListRuleForm .el-form-item {
  margin-bottom: 0;
}

.search-content {
  width: 100%;
  margin: 20px;
}


</style>
